<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="" />
    <meta name="author" content="ChongMing" />
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="full-screen" content="yes">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="360-fullscreen" content="true">
    <title></title>
</head>
<link rel="stylesheet" href="../css/framework7.ios.min.css">
<link rel="stylesheet" href="../css/framework7.ios.colors.min.css">
<link rel="stylesheet" href="../css/my-app.css">
<link rel="stylesheet" href="../css/reset.css">
<script src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../js/framework7.min.js"></script>
<script type="text/javascript" src="../js/my-app.js"></script>
<script>
$(function(){
    var article_id = getQueryString('article_id');
    var uid = getQueryString('uid');
    var page_index = 1 ;
    var page_size = 12 ;
    $.ajax({
        type : 'get',
        url : 'http://ekang.ren/news/detail',
        dataType : 'jsonp',
        data : {article_id:article_id,uid:uid},
        success : function(res) {
            console.log(res);
            var data = res.data ;
            if(data.is_vote==0){
                $('.fixedbot .con .zambia').find('.img').attr('src','images/icon5.png');
                zan = 1;
            }else{
                $('.fixedbot .con .zambia').find('.img').attr('src','images/icon_3.png');
                zan = 2;
            }
            if(data.is_collection==0){
                $('.fixedbot .con .like').find('.img').attr('src','images/icon4.png');
                like = 1;
            }else{
                $('.fixedbot .con .like').find('.img').attr('src','images/icon_2.png');
                like = 2;
            }
            if(res.ret==0){
                $('.Information_details .article .tit').html(res.data.title);
                $('.Information_details .article .desc').html(res.data.message);
                $('.Information_details .article .source').html('易康网'+res.data.add_time);
            }else{
                alert(res.msg);
            }
        }
    });
//    评论列表
    commentlist(article_id);
//    点击喜欢
    var like = 1
    $('.fixedbot .con .like').click(function(){
        if(uid==''){
            android = 'identification';
            jsCourier.sendHTML(android);
        }else{
            $(this).find('.animate').addClass('hover');
            setTimeout(function(){
                $('.fixedbot .con .like').find('.animate').removeClass('hover');
            },500);
            if(like==1){
                $(this).find('.img').attr('src','images/icon_2.png');
                like = 2;
            }else{
                $(this).find('.img').attr('src','images/icon4.png');
                like = 1;
            }
            $.ajax({
                type : 'get',
                url : 'http://ekang.ren/article/collection',
                dataType : 'jsonp',
                data : {article_id:article_id,uid:uid},
                success : function(res) {
                    console.log(res)
                }
            });
        }
    });
//    点击赞
    $('.fixedbot .con .zambia').click(function(){
        if(uid==''){
            android = 'identification';
            jsCourier.sendHTML(android);
        }else{
            $(this).find('.animate').addClass('hover');
            setTimeout(function(){
                $('.fixedbot .con .zambia').find('.animate').removeClass('hover')
            },500);
            if(zan==1){
                $(this).find('.img').attr('src','images/icon_3.png');
                zan = 2;
            }else{
                $(this).find('.img').attr('src','images/icon5.png');
                zan = 1;
            }
            $.ajax({
                type : 'get',
                url : 'http://ekang.ren/news/doVotes/',
                dataType : 'jsonp',
                data : {article_id:article_id,uid:uid},
                success : function(res) {
                    console.log(res)
                }
            });
        }
    });
//    点击评论
    $('.fixedbot .con .comment').click(function(){
        if(uid==''){
            android = 'identification';
            jsCourier.sendHTML(android);
        }else{
            $('.page_comment').show();
            $('.page_comment .con').animate({'bottom':'0px'},300);
        }

    });
    $('.page_comment .con .operation .release').click(function(){
        var val = $('.page_comment .con textarea').val();
        if(val==''){
            alert('请输入评论内容');
        }else{
            $.ajax({
                type : 'post',
                url : 'http://ekang.ren/news/doComments/',
                dataType : 'json',
                data : {uid:uid,article_id:article_id,message:val},
                success : function(res) {
                    console.log(res);
                    $('.Information_details .comment .list').html('');
                    page_index = 1;
                    page_size = 12;
                    commentlist(article_id,page_index,page_size);
                    $('.page_comment .con').animate({'bottom':'-158px'},300,function(){
                        $('.page_comment').hide();
                    });
                }
            });
        }
    });
    $('.page_comment .con .operation .cancel').click(function(){
        $('.page_comment .con').animate({'bottom':'-158px'},300,function(){
            $('.page_comment').hide();
        });
    });
//        下拉刷新
    var myApp = new Framework7();
    var $$ = Dom7;
    var loading = false;
    $$('.infinite-scroll').on('infinite', function () {
        if (loading) return;
        loading = true;
        setTimeout(function () {
            // 重置加载flag
            loading = false;
            page_index++
            commentlist(article_id,page_index,page_size)
        }, 500);
    });
});
function commentlist(article_id,page_index,page_size){
    $.ajax({
        type : 'get',
        url : 'http://ekang.ren/news/comments',
        dataType : 'jsonp',
        data : {article_id:article_id,page_index:page_index,page_size:page_size},
        success : function(res) {
            console.log(res);
            var data = res.data;
            if(data==''||data.length<page_size){
                $('.infinite-scroll-preloader').html('<p style="  text-align: center;font-size: 15px;position: absolute;left: 38%; top: 17%; color: #666;">暂无加载数据</p>');
            }
            if(res.ret==0){
                $.each(data,function(i,t){
                    $('.Information_details .comment .list').append('<div class="con"><div class="userheadimg" style=" background: url('+ t.avatar+'); background-size: cover;"></div><div class="userinfor"><p class="name">'+ t.user_name+'</p><p class="time">'+ t.add_time+'</p><p class="content">'+ t.message+'</p></div></div>');
                });
            }else{
                alert(response.msg)
            }
        }
    });
}
function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]); return null;
}
</script>
<style>
    .list-block ul{
        position: static;
    }
    .list-block ul:after{
        display: none;
    }
    .infinite-scroll-preloader {
        /*margin-top:-100px;*/
        margin: 10px 0 50px 0;
        position: relative;
        height:40px;
    }
    .infinite-scroll-preloader .preloader {
        width:20px;
        height:20px;
        margin-left: 37%;
    }
    .infinite-scroll-preloader .word{
        position: absolute;
        top:17%;
        left:45%;
        font-size: 15px;
        color: #666;
    }
    .page{
        background: rgb(255, 255, 255);
        height: 109%;
    }
    .list-block ul{
        background: rgb(255, 255, 255);
    }
    .pull-to-refresh-layer{
    }
    .page-content{
        margin-top: -50px;
        height: 100%;
    }
    .list-block ul:before{
        background: none;
    }
    .view, .views{
        position: fixed;
    }
    /*page样式*/
    .Information_details{
        width:100%;
        height:auto;
        overflow: hidden;
    }
    .Information_details .article{
        width:94%;
        height:auto;
        overflow: hidden;
        margin: auto;
    }
    .Information_details .article .tit{
        width:100%;
        height:auto;
        overflow: hidden;
        text-align: center;
        margin: 15px 0;
        font-size: 17px;
        color: #35424b;
    }
    .Information_details .article .source{
        color: #999;
        font-size: 12px;
        margin-bottom: 10px;
    }
    .Information_details .article .desc{
        width: 100%;
        text-indent: 2em;
        font-size: 14px;
        color: #666;
        line-height: 24px;
        overflow: hidden;
        padding-bottom: 15px;
    }
    .Information_details .comment{
        width:100%;
        height:auto;
        overflow: hidden;
    }
    .Information_details .comment .tit{
        width: 100%;
        height:40px;
        line-height: 40px;
        font-size: 14px;
        text-align: center;
        border-bottom: 1px solid #e1e1e1;
    }
    .Information_details .comment .list{
        width: 100%;
        height: auto;
        overflow: hidden;
    }
    .Information_details .comment .list .con{
        width: 100%;
        border-bottom: 1px solid #e1e1e1;
        height: auto;
        overflow: hidden;
        padding-top: 10px;
        padding-bottom: 5px;
    }
    .Information_details .comment .list .con .userheadimg{
        width:45px;
        height:45px;
        margin-left: 3%;
        float: left;
        overflow: hidden;
        border-radius: 100px;
    }
    .Information_details .comment .list .con .userinfor{
        float: left;
        margin-left: 10px;
        width: 78%;
        height: auto;
        overflow: hidden;
    }
    .Information_details .comment .list .con .userinfor .name{
        font-size:14px;
        color: #666;
    }
    .Information_details .comment .list .con .userinfor .time{
        font-size: 13px;
        color: #999;
        margin: 9px 0;
    }
    .Information_details .comment .list .con .userinfor .content{
        font-size: 14px;
        color: #333;
        line-height: 24px;
    }
    .fixedbot{
        width: 100%;
        height: 40px;
        background: #fff;
        border-top: 1px solid #e1e1e1;
        z-index: 9999999;
        bottom:0;
        position: fixed;
    }
    .fixedbot .con{
        width: 300px;
        height: 40px;
        margin: auto;
    }
    .fixedbot .con>div{
        width:100px ;
        float: left;
        position: relative;
    }
    .fixedbot .con>div .img{
        width: 24px;
        height: 24px;
        margin:8px auto;
        display: block;
    }
    .fixedbot .con>div .animate.hover{
        width: 24px;
        height: 24px;
        position: absolute;
        left:38px;
        -webkit-animation:animate 0.5s ease-out 0s;
    }
    @-webkit-keyframes animate {
        0%{
            -webkit-transform: scale(1);
            opacity: 1;
            top:7px;
        }
        100%{
            -webkit-transform: scale(1.2);
            opacity: 0;
            top:-17px;
        }
    }
    div{
        max-width:640px; margin: auto
    }
    /*评论板块*/
    .page_comment{
        width:100%;
        height:100%;
        background: rgba(0,0,0,.7);
        position: absolute;
        top:0;
        z-index: 999999999999999;
        overflow: hidden;
        display: none;
    }
    .page_comment .con{
        position: absolute;
        width: 100%;
        bottom:-158px;
        overflow: hidden;
        background: #fff;
    }
    .page_comment .con .operation{
        width: 100%;
        height: 35px;
        background: #fff;
        border-bottom: 1px solid #e1e1e1;
    }
    .page_comment .con .operation .cancel{
        font-size: 15px;
        color: #999;
        line-height: 35px;
        margin-left: 10px;
        float: left;
    }
    .page_comment .con .operation .release{
        font-size: 15px;
        color: #999;
        line-height: 35px;
        margin-right: 10px;
        color: #44b181;
        float: right;
    }
    .page_comment .con textarea{
        display: block;
        width:94%;
        height: 115px;
        max-width:94%;
        min-width:94%;
        overflow: hidden;
        max-height: 115px;
        min-height: 115px;
        resize: none;
        border: none;
        padding: 0 10px;
        padding-top: 4px;
        box-shadow: none;
    }
</style>
<body style=" background: #f5f5f9; max-width:640px; margin: auto; overflow: scroll;">
<div class="views">
    <div class="view view-main" data-page="home">
        <div class="pages navbar-through">
            <div data-page="home" class="page">
                <div class="page-content infinite-scroll">
                    <div class="list-block" style=" margin: 0">
                        <ul>
                            <li style=" margin-top: 6px;">
                                <!--加载刷新的列表-->
                                <div class="Information_details">
                                    <div class="article">
                                        <div class="tit"></div>
                                        <div class="source"> </div>
                                        <div class="desc"></div>
                                    </div>
                                    <div class="bor" style=" width: 100%; height: 10px; background: #ebebeb;"></div>
                                    <div class="comment">
                                        <div class="tit">全部评论</div>
                                        <div class="list">

                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="infinite-scroll-preloader">
                        <div class="preloader"></div>
                        <div class="word">正在加载...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="fixedbot">
    <div class="con">
        <div class="comment"><img class="img img_com" src="images/icon_1.png"></div>
        <div class="like"><img class="img img_like" src="images/icon4.png"><img class="animate" src="images/icon_2.png"></div>
        <div class="zambia"><img class="img img_zambia" src="images/icon5.png"><img class="animate" src="images/icon_3.png"></div>
    </div>
</div>
<div class="page_comment">
    <div class="con">
        <div class="operation">
            <p class="cancel">取消</p>
            <p class="release">发布</p>
        </div>
        <textarea placeholder="我来说两句吧.."></textarea>
    </div>
</div>
</body>
</html>